<template>
  <div>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass" v-if="!eid">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass" v-if="!eid">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="age">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="age">
        <el-select v-model="ruleForm.deptId">
          <el-option v-for="dep in departments" :key="dep.id" :label="dep.name" :value="dep.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管理员" prop="admin">
        <el-switch v-model="ruleForm.admin" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </el-form-item>
      <el-form-item label="分配角色" prop="age" v-show="!ruleForm.admin">
        <el-transfer
          class="my-transfer"
          id="transfer1"
          v-model="ruleForm.ids"
          :data="roles"
          :props="{
            key: 'id',
            label: 'name'
          }"
        ></el-transfer>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addEmployeeFn">提交</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getDepartments,
  getRoles,
  addEmployees,
  getEmployee,
  editEmployee
} from "@/request/httpApi";
export default {
  data() {
    return {
      ruleForm: {
        // deptId: null
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }]
      },
      roles: [],
      departments: [],
      eid: null
    };
  },
  methods: {
    reset() {
      this.ruleForm = {};
      //
      this.$refs.ruleForm.clearValidate();
    },
    addEmployeeFn() {
      const params = {
        ...this.ruleForm,
        dept: {
          id: this.ruleForm.deptId
        }
      };
      delete params.checkPass;
      delete params.deptId;
      if (this.eid) {
        // 编辑
        delete params.roles;
        // params.id = this.eid;
        console.log(params);
        editEmployee(params).then(res => {
          if (res.success) {
            this.$message.success("编辑员工信息成功!");
            // 返回员工列表界面
            this.$router.push("/employee");
          }
        });
      } else {
        // 新增
        addEmployees(params).then(res => {
          if (res.success) {
            this.$message.success("增加员工信息成功!");
            // 返回员工列表界面
            this.$router.push("/employee");
          }
        });
      }
    }
  },
  created() {
    // console.log(this);
    console.log(this.$route.params.eid);
    this.eid = this.$route.params.eid;

    // 调用接口
    getDepartments({
      currentPage: 1,
      pageSize: 100
    }).then(res => {
      // console.log(res);
      if (res.success) {
        this.departments = res.data.list;
        // 判断部门是否是空
        if (this.departments.length > 0) {
          if (this.eid) {
            // 查询单个员工的数据
            getEmployee({ id: this.eid }).then(res => {
              if (res.success) {
                this.ruleForm = {
                  ...res.data,
                  ids: res.data && res.data.roles
                    ? res.data.roles.map(item => item.id)
                    : [],
                  deptId: res.data && res.data.dept ? res.data.dept.id : null
                };
              }
            });
          } else {
            // this.ruleForm.deptId = this.departments[0].id;
            // 通过$set赋值，$set(对象, 属性，新值)，就会令到属性有get set方法
            console.log(this.ruleForm);
            this.$set(this.ruleForm, "deptId", this.departments[0].id);
          }
        }
      }
    });

    // 调用接口请求角色
    getRoles({
      currentPage: 1,
      pageSize: 100
    }).then(res => {
      if (res.success) {
        // this.roles = res.data.list.map(item => {
        //   return {
        //     key: item.id,
        //     label: item.name,
        //   }
        // });
        this.roles = res.data.list;
      }
    });
  }
};
</script>

<style lang="less" scoped>
.my-transfer {
  /deep/ .el-transfer-panel__item.el-checkbox {
    color: green;
  }
}
// #transfer1 {
//   .el-transfer-panel__item.el-checkbox {
//     color: green;
//   }
// }
</style>